<template>
    <div>   
        <div id="title" class="animate__animated animate__backInDown">国家名 ----- 英文名</div>
        <div id="box" class="animate__animated animate__lightSpeedInRight">
            <div id="con1" ref="con1" :class="{anim:animate==true}" @mouseenter="mEnter" @mouseleave="mLeave">
                <p v-for='item in items'>{{item.country_name}}--------{{item.english_name}}</p>
            </div>
        </div>
        <div id="text">把鼠标移到方框区域可暂停</div>
        <div class="animate__animated animate__flipInX">
            <el-button type="primary" round  v-on:click="fast">2倍速</el-button>
            <el-button type="success" round  v-on:click="normal">恢复正常</el-button>
            <el-button type="primary" round  v-on:click="slow">0.5倍速</el-button>
        </div>
        <div style="margin: 30px;" class="animate__animated animate__fadeInUp">               
            <el-button type="info" round v-on:click="toCheck">想要查询？那就点我吧！</el-button>
        </div>
    </div>

</template>

<script>
    
    export default {
        created() {
            const _this = this
            this.axios.get('/country/findAll').then(function (resp) {
              console.log(resp)
                 _this.items = resp.data   //拿到数据库的数据   
            })
        },
        data () {
            return {
                animate:false,
                items:null,//消息列表对应的数组
                kk:1000,
                hh:500,
                tableData: null, //表单数据
                search: '',  
                activeIndex: this.$route.path,   
            }
        },
        mounted () {
            this.timer1= setInterval(this.scroll,this.kk)
        },
        methods: {
            scroll(){
                let con1 = this.$refs.con1;
                con1.style.marginTop='-30px';
                this.animate=!this.animate;
                var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
                setTimeout(function(){
                    that.items.push(that.items[0]);
                    that.items.shift();
                    con1.style.marginTop='0px';
                    that.animate=!that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
                },this.hh)
            },
            mEnter () {
                clearInterval(this.timer1)
            },
            mLeave () {
                this.timer1= setInterval(this.scroll,this.kk)
            },
            fast(){
            //   this.kk = 500
              this.hh = 250
            },
            slow(){
                //  this.kk = 2000
                 this.hh = 1000
            },
            normal(){
            //   this.kk = 1000
              this.hh = 500
            },
            toCheck(){  
              this.$router.replace('/checkCountry')   
             
            }  
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    *{
        margin: 0 ;
        padding: 0;
    }
    #title{
      margin-top: 50px;
      margin-bottom: 10px;
    }
    #text{
      margin-top: 10px;
      margin-bottom: 10px;
      color: rgb(64, 143, 233);
    }
    #box{
        width: 500px;
        height: 175px;
        line-height: 30px;
        overflow: hidden;
        padding-left: 30px;
        border: 1px solid black;
        transition: all 0.5s;
        margin: auto;  
    }
    .anim{
        transition: all 0.5s;
    }
    #con1 li{
        list-style: none;
        line-height: 30px;
        height: 30px;
    }

</style>

